<template>
   <el-dialog
    v-model="dialogVisible"
    title="支付"
    width="500"
    :before-close="handleClose"
    class="page_pay" id="page_pay"
  >
            <el-card>
              <!-- <template #header>
                <h4 class="text-center">总支付：￥{{ detailObj.price_count }}</h4>
              </template> -->
                <el-tabs  v-model="activeName" @tab-click="handleClick">
                  <el-tab-pane label="微信" name="微信">
                    <div class="row">
                      <div class="col">
                        <div style="width: 60%;margin: 0 auto"><img src="../../../public/img/wx.png"></div>
                       
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="支付宝" name="支付宝">
                    <div class="row">
                      <div class="col">
                        <div style="width: 60%;margin: 0 auto"><img src="../../../public/img/aplipay.png"></div>
                
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="网银" name="网银">
                    <div class="row">
                      <div class="col">
                        <div style="width: 80%;margin: 0 auto;margin-top: 30px;">
                          <div style="width: 80%;margin: 0 auto;">
                            <div style="line-height: 40px">请输入网银账号：</div>
                          </div>
                          <div style="width: 80%;margin: 0 auto;">
                            <el-input v-model="pay_obj.account" placeholder="请输入网银账号" />
                          </div>
                        </div>
                        <div style="width: 80%;margin: 0 auto;margin-top: 20px;">
                          <div style="width: 80%;margin: 0 auto;">
                            <div style="line-height: 40px">请输入支付密码，6位数字：</div>
                          </div>
                          <div style="width: 80%;margin: 0 auto;">
                            <el-input placeholder="请输入密码" type="password" autocomplete="new-password"  v-model="pay_obj.password" maxlength="6" />
                          </div>
                        </div>
                      
                        
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
                <template #footer class="text-center" style="margin-top: 10px">
                          <el-button  @click="pay" block
                          >支付</el-button
                          ></template>
                <!--<b-form-group label="支付方式" v-slot="{ ariaDescribedby }">-->
                  <!--<b-form-radio-->
                    <!--v-model="selected"-->
                    <!--:aria-describedby="ariaDescribedby"-->
                    <!--name="some-radios"-->
                    <!--value="A"-->
                  <!--&gt;-->
                    <!--支付宝-->
                  <!--</b-form-radio>-->
                  <!--<b-form-radio-->
                    <!--v-model="selected"-->
                    <!--:aria-describedby="ariaDescribedby"-->
                    <!--name="some-radios"-->
                    <!--value="B"-->
                  <!--&gt;-->
                    <!--微信-->
                  <!--</b-form-radio>-->
                <!--</b-form-group>-->
       

            </el-card>
</el-dialog>
</template>

<script setup>
 import { $post, $get } from "@/api/Api.js";
import { ref,toRefs,computed,onMounted,watch} from "vue"
import { paramsFun,$fullUrl,$toTime,$banseUrl,$check_action,$getUrlParams } from '@/utils/utils.js'
import { useRouter,useRoute } from "vue-router";
let router = useRouter();
let route = useRoute();
let activeName=ref('微信')
const props = defineProps({
  dialogVisible: {
        type: Boolean,
        default:false,
    },
    detailObj: {
        type: Object,
        default:null,
    },
    url:{
      type: String,
      default:'/api/classification_information/set',
    },
    field:{
      type: String,
      default:'customized_products_id',
    },
    IdName:{
      type: String,
      default:'order_number',
    },
  })
let query=ref({})
let handleClose = () => {
  emit('update:dialogVisible', false)
}
let { dialogVisible,detailObj,url,field,IdName} = toRefs(props)//list
let emit = defineEmits(['update:dialogVisible','handleSuccess'])
// let query=ref({
//         sum_price: detailObj.value.price_count,
//         order_number:detailObj.value.order_number,
//         remark:detailObj.value.remark||'',
//         selected: ""
//       })
let pay_obj=ref({
        payActiveName:"网银",
        account:"",
        password:"",
        id:""
      })
    let handleClick=(tab,event)=>{

      console.log(tab, event)
    }
    let   pay=() =>{
      console.log(query)
     $post(url.value+'?'+field.value+'='+query.value[IdName.value]+'&size=7&page=1&orderby=create_time%20desc',{
      pay_state:"已支付",
      pay_type:activeName.value,
      }).then((res)=>{
        if(res.result){
          console.log(res.result);
          ElMessage.success('支付成功')
          handleClose()
          emit('handleSuccess')
        }
      })
    }
   
    watch(dialogVisible, async (val) => {
      if (val) {
       console.log(IdName.value)
       console.log(detailObj.value)
       console.log(detailObj.value[IdName.value])
       query.value=detailObj.value
      }
    })
</script>
<style lang='less'>
.page_pay {
 
 padding:0;
}
</style>
<style scoped lang='less'>

</style>
